<template>
  <div class="c-Home">
    <h3>vue子应用一</h3>
    <div>token：{{ token }}</div>
    <div class="plugin-link">
      <div class="plugin-link-title">插件收藏：</div>
      <el-link type="primary" @click="linkOther('/vueApp/VueQR')">生成二维码</el-link>
      <el-link type="primary" @click="linkOther('/vueApp/VueCropper')">裁剪</el-link>
      <el-link type="primary" @click="linkOther('/vueApp/Print')">打印</el-link>
      <el-link type="primary" @click="linkOther('/vueApp/VueSignaturePad')">手写签名</el-link>
      <el-link type="primary" @click="linkOther('/vueApp/DrawCanvas')">画布</el-link>
    </div>
    <div class="css-box rowlc">
      <div>三角形：</div>
      <div class="flex">
        <div class="triangle bottom"></div>
        <div class="triangle right"></div>
        <div class="triangle top"></div>
        <div class="triangle left"></div>
      </div>
      <div>小箭头：</div>
      <div class="flex">
        <div class="triangle-arrow bottom"></div>
        <div class="triangle-arrow right"></div>
        <div class="triangle-arrow top"></div>
        <div class="triangle-arrow left"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex"

export default {
  name: "Home",
  data() {
    return {
    };
  },
  computed: {
    ...mapGetters(["token"])
  },
  created() {
  },
  methods: {
    linkOther(path) {
      this.$router.push(path)
    }
  }
};
</script>

<style lang="less" scoped>
.c-Home {
  padding: 20px;
  .plugin-link {
    padding: 20px;
    border: solid 1px #eaeaea;
    border-radius: 6px;
    margin-top: 20px;
    box-sizing: border-box;
    .plugin-link-title {
      display: inline-block;
    }
  }
  .css-box {
    padding: 20px;
    border: solid 1px #eaeaea;
    border-radius: 6px;
    margin-top: 20px;
    box-sizing: border-box;
    // 三角形
    .triangle {
      display: inline-block;
      margin-right: 10px;
      border: solid 16px transparent;
      /*下*/
      &.bottom {
        border-top-color: #0097a7;
      }
      /*上*/
      &.top {
        border-bottom-color: #0097a7;
      }
      /*左*/
      &.left {
        border-right-color: #0097a7;
      }
      /*右*/
      &.right {
        border-left-color: #0097a7;
      }
    }
    // 箭头
    .triangle-arrow {
      display: inline-block;
      margin-right: 10px;
      border: 16px solid;
      border-color: transparent #CDDC39 transparent transparent;
      position: relative;
      &::after {
        position: absolute;
        content: "";
        /* 通过位移覆盖背景 */
        right: -20px;
        top: -16px;
        border: 16px solid;
        border-color: transparent #fff transparent transparent;
      }
      /*下*/
      &.bottom {
        transform: rotate(270deg);
      }
      /*上*/
      &.top {
        transform: rotate(90deg);
      }
      /*左*/
      &.left {
        transform: rotate(180deg);
      }
      /*右*/
      &.right {
        transform: rotate(0deg);
      }
    }
  }
}
</style>

